<template>
  <div>
    <a-card :bordered="false">
      <div class="table-operations">
        <div class="table_title">{{ title }}</div>

        <a-tooltip title="刷新">
          <a-icon
            @click="getList"
            class="action"
            :type="loading ? 'loading' : 'reload'"
          />
        </a-tooltip>
      </div>
      <a-table
        :loading="loading"
        rowKey="id"
        size="middle"
        :columns="columns"
        :data-source="list"
        :pagination="false"
      >
        <span slot="status" slot-scope="text, record">
          <a-badge
            :status="record.status == '0' ? 'processing' : 'error'"
            :text="statusFormat(record)"
          />
        </span>
        <span slot="createTime" slot-scope="text, record">
          {{ parseTime(record.createTime) }}
        </span>
        <span slot="isOverdue" slot-scope="text, record">
          <a-popconfirm
            ok-text="是"
            cancel-text="否"
            @confirm="confirmHandleStatus(record)"
            @cancel="cancelHandleStatus(record)"
          >
            <span slot="title"
              >确认<b>{{ record.isOverdue === 1 ? "未逾期" : "逾期" }}</b
              >?</span
            >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              :checked="record.isOverdue === 1"
            />
          </a-popconfirm>
        </span>
        <!-- <span slot="operation" slot-scope="text, record">
          <a @click="handleSubUpdate(record)" v-hasPermi="['system:dict:edit']">
            修改
          </a>
          <a-divider type="vertical" />
          <a
            @click="handleSubDelete(record)"
            v-hasPermi="['system:dict:remove']"
          >
            删除
          </a>
        </span> -->
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {
  listBizLoanBillDetail,
  updateLoanBillDetailOverDue,
} from "@/api/biz/bizLoanBillDetail";
export default {
  name: "DictData",
  props: {
    loanId: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      default: "子表",
    },
  },
  components: {},
  data() {
    return {
      showAddSubModal: false,
      showEditSubModal: false,
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      dictLabels: [],
      loading: false,
      total: 0,
      // 状态数据字典
      statusOptions: [],
      queryParam: {
        pageNum: 1,
        pageSize: 60,
      },
      columns: [
        {
          title: "期数",
          dataIndex: "period",
          ellipsis: true,
          align: "center",
          width: "5%",
        },
        {
          title: "还款日",
          dataIndex: "payDate",
          ellipsis: true,
          align: "center",
          width: "5%",
        },

        {
          title: "月供金额",
          dataIndex: "monthPayment",
          align: "right",
          width: "10%",
        },
        {
          title: "本金金额",
          dataIndex: "principal",
          align: "right",
          width: "10%",
        },
        {
          title: "利息",
          dataIndex: "interest",
          align: "right",
          width: "10%",
        },
        {
          title: "剩余本金",
          dataIndex: "remainingPrincipal",
          align: "right",
          width: "10%",
        },
        {
          title: "是否逾期",
          dataIndex: "isOverdue",
          scopedSlots: { customRender: "isOverdue" },
          align: "center",
          width: "10%",
        },

        // {
        //   title: "逾期天数",
        //   dataIndex: "overdueDays",
        //   align: "right",
        //   width: "10%",
        // },
        // {
        //   title: "逾期说明",
        //   dataIndex: "overdueRemark",
        //   ellipsis: true,
        //   align: "left",
        //   width: "10%",
        // },
        // {
        //   title: "操作",
        //   dataIndex: "operation",
        //   align: "center",
        //   width: "10%",
        //   scopedSlots: { customRender: "operation" },
        // },
      ],
    };
  },
  filters: {},
  created() {
    this.queryParam.loanId = this.loanId;
    this.getList();
    this.getDicts("sys_normal_disable").then((response) => {
      this.statusOptions = response.data;
    });
  },
  computed: {},
  watch: {},
  methods: {
    /* 任务状态修改 */
    confirmHandleStatus(row) {
      const text = "操作";
      row.isOverdue = row.isOverdue === 1 ? 0 : 1;
      console.log("row.isOverdue", row.isOverdue);
      updateLoanBillDetailOverDue(row)
        .then(() => {
          this.$message.success(text + "成功", 3);
          this.freshLoanBillList();
        })
        .catch(function () {
          this.$message.error(text + "发生异常", 3);
        });
    },
    cancelHandleStatus(row) {},

    freshLoanBillList() {
      this.$emit("getlist");
      this.getList();
    },

    getList() {
      this.showAddSubModal = false;
      this.showEditSubModal = false;
      this.loading = true;
      listBizLoanBillDetail(this.queryParam).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1;
      this.getList();
    },
    handleSubAdd() {
      this.showAddSubModal = true;
      this.$nextTick(() => this.$refs.dictDataAddForm.handleAdd());
    },
    handleSubUpdate(record) {
      this.showEditSubModal = true;
      this.$nextTick(() => this.$refs.dictDataEditForm.handleUpdate(record));
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParam = {
        pageNum: 1,
        pageSize: 60,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
      };
      this.handleQuery();
    },
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current;
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
      this.ids = this.selectedRows.map((item) => item.id);
      this.dictLabels = this.selectedRows.map((item) => item.dictLabel);
      this.single = selectedRowKeys.length !== 1;
      this.multiple = !selectedRowKeys.length;
    },
  },
};
</script>
